<template>
    <div>
        <Row>
            <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 24, offset: 0 }"  :md="{ span: 6, offset: 1 }" :lg="{ span: 6, offset: 1 }">
                <Card :style="'background:white ;width:90%;margin-top:40px'" >
                    <Spin fix v-if="spinShow"></Spin>
                    <Avatar size="large" style="color: #f56a00; backgroundColor: #fde3cf; margin-left: 45%; font-size: 18px; margin-top: 20px;"> {{user.name == null? 'U': user.name.substr(user.name.length-1,1)}} </Avatar>
                    <h2 style="text-align: center;margin-top:10px; font-size: 24px;font-weight: bold;"> {{user.userId}} </h2>
                    <div style="margin-top:30px;margin-left:10%"><Icon type="ios-person-outline" size="25"/>  {{user.name == null? '暂无': user.name}}</div>
                    <div style="margin-top:10px;margin-left:10%"> <Icon type="ios-call-outline" size="25"/>  {{user.mobile == null? '暂无': user.mobile}}</div>
                    <div style="margin-top:10px;margin-left:10%"><Icon type="ios-mail-outline" size="25"/>  {{user.email == null? '暂无': user.email}}</div>
                    <Divider/>
                    <Row type="flex" justify="space-around">
                        <i-button type="info" long style="width: 85%;" @click="editInfo">修改用户信息</i-button>
                    </Row>
                </Card>
            </Col>
            <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 24, offset: 0 }"  :md="{ span: 16, offset: 0 }" :lg="{ span: 16,offset: 0  }">
                <Card :style="'background:white;width:100%;margin-top:40px'">
                    <Tabs>
                        <Spin fix v-if="spinShow"></Spin>
                        <Tab-pane label="已选课程" icon="ios-happy">
                            <Card :bordered="false" style="width:320px" dis-hover>
                                <div style="text-align:center">
                                    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1447479527,3312545118&fm=26&gp=0.jpg" style="width:50%; margin-bottom: 20px;">
                                    <h3>一套基于 Vue.js 的高质量UI组件库</h3>
                                </div>
                            </Card>
                        </Tab-pane>
                        <!-- <Tab-pane label="已完成" icon="ios-happy">标签二的内容</Tab-pane>
                        <Tab-pane label="全部课程" icon="ios-happy">标签三的内容</Tab-pane> -->
                    </Tabs>
                </Card>
            </Col>
        </Row>
        <Row style="height: 30px" />
    </div>
</template>

<script>
import loginApi from '@/api/login'  
import cookie from 'js-cookie'

export default {
    data () {
        return {
        //用户信息
            user: {},
            commentList:[],
            collectMovieList:[],
            messageList:[],
            topicList:[],
            tabValue:'1',
            existOther:false,
            existLike:false,
            existDeleteComment:false,
            commentShowNum:4,
            movieShowNum:4,
            messageShowNum:7,
            topicShowNum:2,
            messageModal:false,
            messageValue:'',
            spinShow:false,
            loading:false,
            loading1:false,
            loading2:false,
            loading3:false,
        }
    },
    methods: {
        editInfo: function() {
            this.$router.push({path:'/info/editInfo'})
        },
        getUserInfo: function() {
            //从cookie获取用户信息
            var userStr = cookie.get('userInfo')
            // 把字符串转换json对象(js对象)
            if(userStr) {
                this.user = JSON.parse(userStr)
            }
        }
    },
    created() {
        this.getUserInfo()
    },
    watch: {   //监听路由变化
        "$route" (to, from) {
            this.getUserInfo();
        },
    }

};
</script>

<style lang="less" scoped>
    .friend{
        margin-left: 25%;
        font-size: 13px;
    }
    .friend1{
        margin-left:10%;
        font-size: 13px;
    }
    span.friend:hover{
          color: #3399ff;
          cursor: pointer;
      }
    span.friend1:hover{
        color: #3399ff;
        cursor: pointer;
    }
    .friendNum1{
        margin-left:12%;
        font-size: 13px;
    }
    .friendNum2{
        margin-left: 30%;
        font-size: 13px;
    }
    .friendNum3{
        margin-left: 31%;
        font-size: 13px;
    }
    .activeLikeValue{
        cursor: pointer;
    }
    i.activeLikeValue:hover{
        color: red;
    }
    .Rate{
        font-size: 20px;
    }
    .moviename{
        text-align: center;
        font-size: 13px;
    }
    .clickClass{
        cursor: pointer;
    }
    div.clickClass:hover{
        color: #3399ff;
    }
    span.liClass:hover{
        color: red;
    }
    .collectDate{
        text-align: center;
        margin-top: 5px;
        font-size: 12px;
        color:#aaa;
    }
</style>
